<template>
  <div id="category-sales-volume" ref="categorySaleVolumeRef"></div>
</template>

<script>
import echarts from 'echarts'

function dateFormat(fmt, date) {
  let ret
  const opt = {
    'y+': date.getFullYear().toString(),        // 年
    'M+': (date.getMonth() + 1).toString(),     // 月
    'd+': date.getDate().toString(),            // 日
    'H+': date.getHours().toString(),           // 时
    'm+': date.getMinutes().toString(),         // 分
    'S+': date.getSeconds().toString()          // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  }
  for (let k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt)
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
    }
    ;
  }
  ;
  return fmt
}

export default {
  name: 'category-sales-volume',
  data() {
    return {
      chartLine: null,
      salesData: {
        salesVolume: [
        ],
        dateList: [],

      }
    }
  },
  mounted() {
    this.$http({
      url: this.$http.adornUrl('/mall/workbench/sales'),
      method: 'get'
    }).then(({data}) => {
      for (let i = 6; i >= 0; i--) {
        let date = new Date()
        date.setDate(date.getDate() - i)
        this.salesData.dateList.push(dateFormat('yyyy-MM-dd', date))
      }
      Object.keys(data.result).forEach(item => {
        let map = data.result[item]
        this.salesData.dateList.forEach(date => {
          if (!map.hasOwnProperty(date)) {
            map[date] = 0
          }
        })
        this.salesData.salesVolume.push({
          name: item,
          data: Object.keys(map).sort().map(item => map[item])
        })
      })
      this.initChartLine()
    })
  },
  activated() {
    // 由于给echarts添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chartLine) {
      this.chartLine.resize()
    }
  },
  methods: {
    // 折线图
    initChartLine() {
      const legendList = this.salesData.salesVolume.map(item => item.name)
      this.salesData.salesVolume.forEach(item => {
        item.type = 'line'
      })
      let option = {
        'title': {
          'text': '近7天销售量'
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': legendList
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': {}
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': this.salesData.dateList
        },
        'yAxis': {
          'type': 'value'
        },
        'series': this.salesData.salesVolume
      }
      this.chartLine = echarts.init(document.getElementById('category-sales-volume'))
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },
  }
}
</script>

<style lang="less" scoped>
#category-sales-volume {
  height: 100%;
  width: 100%;
}
</style>
